// components/achCmpt/index.js
// 成果页组件库

import "./index.less";
import {Image, Input, Text, View} from "@tarojs/components";
import {GLOBAL_IMAGE} from "../../constant/contant";
import {utils} from "../../utils/utils";
import Taro from "@tarojs/taro";
import {API_PATH} from "../../api/api";

const TRACK_ARR = [
    "全部", "集成电路", "工业母机", "新一代移动通信", "工业软件", "人工智能", "生物技术", "新能源", "新能源汽车", "新材料"
];

export function SearchBar(props) {
    const {searchText, handleSearch, onSearchChange} = props

    const removeEvent = () => {
        onSearchChange("")
    }

    return (
        <View className={"searchBar"}>
            <Input className={"searchBar-input"} placeholderClass={"searchBar-placeholder"}
                   type="text" placeholder={"搜索关键词"} value={searchText}
                   confirmType={"search"} onInput={handleSearch}/>
            <View className={"remove"}>
                <Image src={GLOBAL_IMAGE.chacha} onClick={removeEvent}/>
            </View>
        </View>
    )
}

export function Track(props) {
    const {trackActiveList, trackClick, trackAllClick} = props

    // 获取赛道选项
    const getTrackItem = (width, text) => {
        return <TrackItem
            width={width}
            text={text}
            active={trackActiveList.indexOf(text) !== -1}
            clickEvent={trackClick(text)}
        />
    }

    return (
        <View className={"track"}>
            <View className={"track_left"}>
                <View className={"track_title"}>
                    <Image src={GLOBAL_IMAGE.track_title}/>
                </View>
            </View>
            <View className={"track_right"}>
                <View className={"track_row track_row1"}>
                    <TrackItem width={"148rpx"}
                        text={TRACK_ARR[0]} active={trackActiveList?.length === 0}
                        clickEvent={trackAllClick}
                    />
                </View>
                <View className={"track_row track_row2"}>
                    {getTrackItem("148rpx", TRACK_ARR[1])}
                    {getTrackItem("148rpx", TRACK_ARR[2])}
                    {getTrackItem("224rpx", TRACK_ARR[3])}
                </View>
                <View className={"track_row track_row3"}>
                    {getTrackItem("148rpx", TRACK_ARR[4])}
                    {getTrackItem("148rpx", TRACK_ARR[5])}
                    {getTrackItem("148rpx", TRACK_ARR[6])}
                </View>
                <View className={"track_row track_row4"}>
                    {getTrackItem("148rpx", TRACK_ARR[7])}
                    {getTrackItem("224rpx", TRACK_ARR[8])}
                    {getTrackItem("148rpx", TRACK_ARR[9])}
                    {/*<TrackItem width={"148rpx"}*/}
                    {/*    text={TRACK_ARR[7]} active={trackActiveList.indexOf(TRACK_ARR[7]) !== -1}/>*/}
                </View>
            </View>
        </View>
    )
}

export function Stage(props) {
    const {stageActiveList, stageClick, stageAllClick, stages} = props;

    // 获取阶段选项
    const getTrackItem = (width, stageObj) => {
        return <TrackItem
            width={width}
            text={stageObj.label}
            active={isStageActive(stageObj)}
            clickEvent={stageClick(stageObj)}
        />
    }

    // 判断stageActiveList是否包含stageObj
    const isStageActive = (stageObj) => {
        return stageActiveList.findIndex((item) => {
            return item.id === stageObj.id
        }) !== -1
    }

    // 根据文字获取宽度 1-4个字 148rpx 5-7个字 224rpx 8-10个字 300rpx 11-13个字 376rpx
    const getWidth = (text) => {
        // 注意英文数字字符占用的宽度是中文字符的一半
        let width = 0
        for (let i = 0; i < text.length; i++) {
            if (text[i].match(/[a-zA-Z0-9]/)) {
                width += 0.5
            } else {
                width += 1
            }
        }

        if (width <= 4) {
            return "148rpx"
        } else if (width <= 7) {
            return "224rpx"
        } else if (width <= 10) {
            return "300rpx"
        } else {
            return "376rpx"
        }
    }

    return (
        <View className={"stage"}>
            <View className={"stage_left"}>
                <View className={"stage_title"}>
                    <Image src={GLOBAL_IMAGE.stage_title}/>
                </View>
            </View>
            <View className={"stage_right"}>
                <View className={"track_row track_row1"}>
                    <TrackItem width={"148rpx"}
                               text={"全部"} active={stageActiveList?.length === 0}
                               clickEvent={stageAllClick}
                    />
                </View>
                <View className={"track_row track_row2"}>
                    {
                        stages.map((item, index) => {
                            return getTrackItem(getWidth(item.label), item)
                        })
                    }
                </View>
            </View>
        </View>

    )
}

function TrackItem(props) {
    const {active, text, width, clickEvent} = props

    return (
        <View className={utils.classNames("trackItem", {trackItem_active: active})}
              style={{width: width}}
              onClick={clickEvent}
        >
            <Text>{text}</Text>
        </View>
    )
}


export function SearchCount(props) {
    const {count} = props

    return (
        <View className={"searchCount"}>
            <Text>- 搜索到 {count} 条信息 -</Text>
        </View>
    )
}

// 搜索到的成果列表
export function AchList(props) {
    const {achList} = props

    return (
        <View className={"achList"}>
            {
                achList.map((item, index) =>
                    <AchItem
                        achObj={item}
                        key={index}
                    />
                )
            }
            {/*<AchItem*/}
            {/*    title={"多功能复合制造快速修复机床"}*/}
            {/*    img={GLOBAL_IMAGE.ach_test}*/}
            {/*    tag={"工业母机"}*/}
            {/*    isLike={true}*/}
            {/*    talkNum={9999}*/}
            {/*    isStar={true}*/}
            {/*/>*/}
        </View>
    )
}

function AchItem(props) {
    const {achObj} = props

    const goToDetail = () => {
        Taro.navigateTo({
            url: '/pages/detail/index?id=' + achObj.proId
        })
    };

    const totalFormat = (num) => {
        if (num > 9999) {
            const wan = Math.floor(num / 10000);
            const decimal = ((num % 10000) / 10000).toFixed(1);
            return `${wan}.${decimal}万`;
        } else {
            return num.toString();
        }
    }

    return (
        <View className={"achItem"} hoverClass={"achItem_hover"}
              onClick={goToDetail}
              hoverStayTime={150} hoverStartTime={0}>
            <View className={"achImg"}>
                <Image src={achObj?.imagePath ? API_PATH + achObj?.imagePath : GLOBAL_IMAGE.poster} mode={"aspectFit"}/>
                <View className={"ach_tag"}>
                    <Text>{achObj?.itName}</Text>
                </View>
                {/*<View className={"ach_like"}>*/}
                {/*    <Image src={achObj?.isPraise === 1 ? GLOBAL_IMAGE.like_true : GLOBAL_IMAGE.like_false}/>*/}
                {/*</View>*/}
            </View>
            <View className={"achTitle"}>
                <Text>{achObj?.proName}</Text>
            </View>
            <View className={"achHot_row"}>
                <View className={"company_ico"}>
                    <Image src={GLOBAL_IMAGE.company}/>
                </View>
                <View className={"company_text"}>
                    <Text>{achObj?.company}</Text>
                </View>
                <View className={"achTalk_ico"}>
                    <Image src={GLOBAL_IMAGE.talk}/>
                </View>
                <View className={"achTalk_num"}>
                    <Text>{totalFormat(achObj?.commentTotal)}</Text>
                </View>
                {/*<View className={"achStar_ico"}>*/}
                {/*    <Image src={achObj?.isCollect ? GLOBAL_IMAGE.star_true : GLOBAL_IMAGE.star_false}/>*/}
                {/*</View>*/}
                {/*<View className={"achStar_text"}>*/}
                {/*    <Text>收藏</Text>*/}
                {/*</View>*/}
            </View>
        </View>
    )
}
